<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
	
		<style type="text/css">
			.icons-project:hover {
				background: #f5f5f5 ;
				color: #FFF;
				text-decoration: none;
				border-radius:2px;
			}
			.icons-project {
				float: left;
				margin-top: 10px;	
			}
			.icons-project img {
				width: 60px ;
				margin: 3px;
				padding: 2px;
				border: 2px solid transparent;
				vertical-align: middle;
			}
			.col-click {
				background: #f5f5f5 ;
				color: #FFF;
				text-decoration: none;
				border-radius:2px;
			}
			.fontawesome-icon-list{
				padding:10px;
			}
		</style>	
		
		<div class="container-fluid">
			<div class="animated fadeIn">
				<div class="row">
					<div class="col-lg-12">
						<div class="row fontawesome-icon-list"> 
						   <div class="fa-hover icons-project" th:each="i:${#numbers.sequence(1,30)}">
						   		<img th:src="@{'/asserts/icons/project/'+${i}+'.svg'}" />	
						   </div> 
						 </div>	
					</div>
				</div>
			</div>
		</div>
	</div>
		
	<input type="hidden" id="selectResourceParentNode" />

	<script th:src="@{/asserts/js/jquery.min.js}"></script>
	<script type="text/javascript">
		$(function(){
			$("div.fa-hover").click(function(){
				var c = $(this).find("i").attr("class") ; 
				
				$(this).addClass("col-click") ; 
				$(this).siblings().removeClass("col-click");
				
				$("input[id=selectResourceParentNode]").attr("data-id" ,c) ; 
				$("input[id=selectResourceParentNode]").attr("data-name" ,c) ; 
			}) ;
		}) ;	 
	</script>
</body>
</html>
